import React, { Component } from "react";

import { Arrow } from "@react-vant/icons";
import { Card, NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";


function Activ() {
    const navigate = useNavigate();
  const [data, setData] = React.useState([
    {
      _id: "1",
      title: "活动1",
      content: "活动1的内容",
      time: "2021-11-05 21:10:31",
    },
    {
      _id: "2",
      title: "活动2",
      content: "活动2的内容",
      time: "2021-11-05 21:10:31",
    },
  ]);

  return (
    <div style={{ backgroundColor: "#F7F7F7", height: "100vh" }}>
      {/* <h1>活动通知</h1> */}
      <NavBar
        title="活动通知"
        left-icon="back"
        left-text="返回"
        left-arrow
        onClickLeft={() => navigate(-1)}
      />
      {data.map((item) => (
        <div style={{ margin: "20px auto", width: "95%" }}>
          <p style={{ margin: "15px 0" }}>{item.title}</p>
          <Card round style={{ marginBottom: 20 }} onClick={() => navigate("/outlet/actd")}>
            <Card.Cover>
              <img
                src="https://cdn8.axureshop.com/demo2024/1877666/images/%E6%B4%BB%E5%8A%A8%E9%80%9A%E7%9F%A5%E5%88%97%E8%A1%A8/u8190.svg"
                alt=""
                style={{ width: "100%" }}
              />
            </Card.Cover>
            <Card.Header>
              <p>{item.content}</p>
            </Card.Header>
            <Card.Body>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <p>点击查看更多</p>
                <Arrow />
              </div>
            </Card.Body>
          </Card>
        </div>
      ))}
    </div>
  );
}
export default Activ;
